<style lang="scss" >
#cmain {
    .mainContent {
        min-height: 425px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0px 0px 15px 0px rgba(207, 207, 207, 1);
        padding-top: 10px;
        padding: 0px 30px;
        .mainContentLeft {
            float: left;
            width: 35%;
            margin-left: 10%;
        }
        .mainContentRight {
            float: right;
            width: 35%;
            margin-left: 5%;
        }
        .clearfix span {
            left: 290px;
            top: 132px;
            width: 115px;
            height: 23px;
            line-height: 23px;
            color: rgba(102, 102, 102, 1);
            font-size: 16px;
            text-align: center;
            font-family: Roboto;
        }
        .el-input--mini .el-input__inner {
            width: 202px;
        }
    }
     .el-icon-plus:before {
        color: #337aba;
        font-size: 20px;
        font-weight: 800;
        cursor: pointer;
    }
    .el-icon-minus:before {
        color: #e51c23;
        font-size: 20px;
        font-weight: 800;
        cursor: pointer;
    }
}
</style>

<template>
    <div id="cmain" class="family-tree-mask" v-loading="loading" element-loading-text="数据加载中，请稍等......">
        <div class="mainContent">
            <!--临床与治疗信息-->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>临床与治疗信息</span>
                </div>
                <div class="text item">
                    <div class="mainContentLeft">
                        <el-form ref="form" :model="datas" label-width="140px" :label-position="labelPosition" size='mini'>
                            <el-form-item label="患癌部位">
                                <el-select v-model="datas.cancer_site" placeholder="请选择">
                                    <el-option label="请选择" value="0"></el-option>
                                    <el-option label="胰头" value="1"></el-option>
                                    <el-option label="胰体" value="2"></el-option>
                                    <el-option label="胰尾" value="3"></el-option>
                                    <el-option label="钩突部" value="4"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="TNM分期">

                            </el-form-item>

                            <el-form-item label="T">
                                <el-select v-model="datas.t" placeholder="请选择" @change='tnm'>
                                    <el-option label="请选择" value="0"></el-option>
                                    <el-option label="Tis" value="Tis"></el-option>
                                    <el-option label="Tx" value="Tx"></el-option>
                                    <el-option label="T0" value="T0"></el-option>
                                    <el-option label="T1" value="T1"></el-option>
                                    <el-option label="T2" value="T2"></el-option>
                                    <el-option label="T3" value="T3"></el-option>
                                    <el-option label="T4" value="T4"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="N">
                                <el-select v-model="datas.n" placeholder="请选择" @change='tnm'>
                                    <el-option label="请选择" value="0"></el-option>
                                    <el-option label="Nx" value="Nx"></el-option>
                                    <el-option label="N0" value="N0"></el-option>
                                    <el-option label="N1" value="N1"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="M">
                                <el-select v-model="datas.m" placeholder="请选择" @change='tnm'>
                                    <el-option label="请选择" value="0"></el-option>
                                    <el-option label="M0" value="M0"></el-option>
                                    <el-option label="M1" value="M1"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="临床分期">
                                <el-input v-model="datas.tnm_result" readonly='readonly'></el-input>
                            </el-form-item>

                            <el-form-item label="肿瘤大小（cm）">
                                <el-input v-model="datas.tumor_size"></el-input>
                            </el-form-item>

                            <el-form-item label="手术">
                                <el-select v-model="datas.surgery" placeholder="请选择">
                                    <el-option label="请选择" value="0"></el-option>
                                    <el-option label="胰十二指肠切除术" value="1"></el-option>
                                    <el-option label="远端胰腺切除术" value="2"></el-option>
                                    <el-option label="胰体尾切除术" value="3"></el-option>
                                </el-select>
                            </el-form-item>

                        </el-form>
                    </div>

                    <div class="mainContentRight">
                        <el-form ref="form" :model="datas" label-width="140px" :label-position="labelPosition" size='mini'>
                            <el-form-item label="是否进行过化疗">
                                <el-radio-group v-model="datas.chemotherapy">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="是否进行过放疗">
                                <el-radio-group v-model="datas.radiation_therapy">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="胰腺上皮内瘤变">
                                <el-radio-group v-model="datas.epithelial_neoplasia">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="慢性胰腺炎">
                                <el-radio-group v-model="datas.chronic_pancreatitis">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="胆道梗阻（黄疸／直接胆红素升高）">
                                <el-radio-group v-model="datas.biliary_obstruction">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-card>

            <!--遗传性肿瘤综合征表型信息-->

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>遗传性肿瘤综合征表型信息</span>
                </div>
                <div class="text item">
                    <div class="mainContentLeft">
                        <el-form ref="form" :model="datas" label-width="140px" :label-position="labelPosition" size='mini'>
                            <el-form-item label="患有黑斑性息肉">
                                <el-radio-group v-model="datas.darkspot">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <div>
                                <el-form-item label="个数" v-if='datas.darkspot==1'>
                                    <el-input v-model="datas.darkspot_num"></el-input>
                                </el-form-item>
                            </div>

                            <el-form-item label="患有幼年性息肉">
                                <el-radio-group v-model="datas.juvenile">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="个数" v-if='datas.juvenile==1'>
                                <el-input v-model="datas.juvenile_num"></el-input>
                            </el-form-item>

                            <el-form-item label="患有腺瘤性息肉">
                                <el-radio-group v-model="datas.adenomatous">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="个数" v-if='datas.adenomatous==1'>
                                <el-input v-model="datas.adenomatous_num"></el-input>
                            </el-form-item>

                            <el-form-item label="皮肤黏膜色素沉着过度">
                                <el-radio-group v-model="datas.skin_mucosa">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="黑斑性息肉病家族史">
                                <el-radio-group v-model="datas.darkspot_family">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="幼年性息肉病家族史">
                                <el-radio-group v-model="datas.juvenile_family">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="患有黑色素瘤">
                                <el-radio-group v-model="datas.melanoma">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="个数" v-if='datas.melanoma==1'>
                                <el-input v-model="datas.melanoma_num"></el-input>
                            </el-form-item>

                            <el-form-item label="患多发性或双侧性先天性视网膜色素上皮肥大">
                                <el-radio-group v-model="datas.retina">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                        </el-form>

                    </div>

                    <div class="mainContentRight">
                        <el-form ref="form" :model="datas" label-width="140px" :label-position="labelPosition">

                        </el-form>
                    </div>
                </div>
            </el-card>

            <!--基因检测信息-->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>基因检测信息</span>
                </div>
                <div class="text item gene-item">
                    <template>
                        <el-table
                            type=index
                            :data="datas.results"
                            border
                            style="width: 100%">

                            <el-table-column
                            fixed="left"
                            label="操作">
                            <template slot-scope="scope">
                                <i class="el-icon-plus" @click="addGen(scope.$index)"></i>
                                <i class="el-icon-minus" @click="removeGen(scope.$index)"></i>
                            </template>
                            </el-table-column>

                            <el-table-column
                            fixed
                            contentEditable
                            prop="detection_result_gene"
                            width="240"
                            label="基因">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.detection_result_gene" placeholder="只能输入大写字母和数字"></el-input>
                            </template>
                            </el-table-column>

                            <el-table-column
                            prop="detection_result_trans"
                            width="240"
                            label="转录本号">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.detection_result_trans" placeholder="请输入转录本号"></el-input>
                            </template>
                            </el-table-column>

                            <el-table-column
                            prop="detection_result_varia"
                            width="240"
                            label="变异位点">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.detection_result_varia" placeholder="请输入变异位点"></el-input>
                            </template>
                            </el-table-column>

                            <el-table-column
                            label="检测类型">
                            <template slot-scope="scope">
                                    <el-select v-model="scope.row.assay_type" placeholder="请选择">
                                        <el-option label="请选择" value="0"></el-option>
                                        <el-option label="全基因组" value="1"></el-option>
                                        <el-option label="全外显子检测" value="2"></el-option>
                                        <el-option label="panel检测" value="3"></el-option>
                                        <el-option label="sanger测序" value="4"></el-option>
                                        <el-option label="MLPA" value="5"></el-option>

                                    </el-select>                             
                            </template>
                            </el-table-column>

                            <el-table-column
                            label="功能改变">
                            <template slot-scope="scope">
                               
                                    <el-select v-model="scope.row.functional_change" placeholder="请选择" v-if='scope.row.functional_change!="6"'>
                                        <el-option label="请选择" value="0"></el-option>
                                        <el-option label="错义突变" value="1"></el-option>
                                        <el-option label="无义突变" value="2"></el-option>
                                        <el-option label="移码突变" value="3"></el-option>
                                        <el-option label="同义突变" value="4"></el-option>
                                        <el-option label="剪接位点突变" value="5"></el-option>
                                        <el-option label="其他" value="6"></el-option>

                                    </el-select>
                                    <div v-else>
                                        <el-input v-model="scope.row.other_function_change"></el-input>
                                        <i class="el-icon-error" @click="goBackSelect(scope.row)"></i>
                                    </div>
                                    
                                    
                               
                            </template>
                            </el-table-column>

                            <el-table-column
                            label="突变类型">
                            <template slot-scope="scope">
                               
                                    <el-select v-model="scope.row.mutation_type" placeholder="请选择">
                                        <el-option label="请选择" value="0"></el-option>
                                        <el-option label="致病的" value="1"></el-option>
                                        <el-option label="可能致病的" value="2"></el-option>
                                        <el-option label="意义不明确的" value="3"></el-option>
                                        <el-option label="可能良性的" value="4"></el-option>
                                        <el-option label="良性的" value="5"></el-option>

                                    </el-select>
                               
                            </template>
                            </el-table-column>
                            
                            
                        </el-table>
                    </template>



                </div>
            </el-card>
            <!--生活方式-->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>生活方式</span>
                </div>
                <div class="text item">
                    <div class="mainContentLeft">
                        <el-form ref="form" :model="datas" label-width="140px" :label-position="labelPosition" size='mini'>
                            <el-form-item label="吸烟">
                                <el-radio-group v-model="datas.smoking">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                    
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="" v-if='datas.smoking==1' label-width="200px">
                                <el-input size="small" v-model="datas.smoking_cycle" style='width:50px'></el-input> &nbsp;&nbsp;包/周&nbsp;X&nbsp;
                                <el-input size="small" v-model="datas.smoking_year" style='width:50px'></el-input> &nbsp;&nbsp;年
                            </el-form-item>

                            <el-form-item label="饮酒">
                                <el-radio-group v-model="datas.drink">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="" v-if='datas.drink==1' label-width="200px">
                                <el-input size="small" v-model="datas.drink_cycle" style='width:50px'></el-input> &nbsp;&nbsp;次/周
                            </el-form-item>

                            <el-form-item label="高脂高红肉类饮食">
                                <el-radio-group v-model="datas.fatty_meat">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                        </el-form>
                    </div>
                    <div class="mainContentRight">
                        <el-form ref="form" :model="datas" label-width="140px" :label-position="labelPosition" size='mini'>
                            <el-form-item label="每日蔬菜摄入量">
                                <el-select v-model="datas.vegetable_consum" placeholder="请选择">
                                    <el-option label="请选择" value="0"></el-option>
                                    <el-option label="≥500mg" value="1"></el-option>
                                    <el-option label="＜500mg" value="2"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="每日运动消耗量">
                                <el-select v-model="datas.dec" placeholder="请选择">
                                    <el-option label="请选择" value="0"></el-option>
                                    <el-option label="基本无运动量" value="1"></el-option>
                                    <el-option label="30-50大卡" value="2"></el-option>
                                    <el-option label="50-100大卡" value="3"></el-option>
                                    <el-option label="100-200大卡" value="4"></el-option>
                                    <el-option label="200-300大卡" value="5"></el-option>
                                    <el-option label="＞300大卡" value="6"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="体重（kg）">
                                <el-input v-model="datas.weight" @change="getBmi"></el-input>
                            </el-form-item>

                            <el-form-item label="身高（cm）">
                                <el-input v-model="datas.height" @change="getBmi"></el-input>
                            </el-form-item>

                            <el-form-item label="BMI">
                                <!-- <el-input v-model="datas.bmi" readonly='readonly'></el-input> -->
                                 <div>
                                     {{datas.bmi}}
                                 </div>
                            </el-form-item>

                        </el-form>
                    </div>
                </div>

            </el-card>

            <el-card class="box-card footer-card">
                <div slot="header">
                    <Button  style="float: right; margin-left:20px;" @click="onClose">取消</Button>
                    <Button type="primary" style="float: right;" @click="save">保存</Button>    
                </div>
            </el-card>

        </div>
    </div>
</template>
<script>
import { familyTree } from "api/index.js";
import { setCookie, getCookie, delCookie } from "@/common/js/cookie.js";
export default {
    name: "胰腺癌", //胰腺癌
    data() {
        return {
            loading:false,
            familyTreeId: "",
            familyUserId: "",
            cancerId: "",
            labelPosition: "left", //表单对齐方式
            datas: {
                cancer_site: "",
                t: "",
                n: "",
                m: "",
                tnm_result: "",
                surgery: "",
                chemotherapy: "2",
                radiation_therapy: "2",
                tumor_size: "",
                darkspot: "2",
                darkspot_num: "",
                juvenile: "2",
                juvenile_num: "",
                adenomatous: "2",
                adenomatous_num: "",
                skin_mucosa: "2",
                darkspot_family: "2",
                juvenile_family: "2",
                melanoma: "2",
                melanoma_num: "",
                retina: "2",
                epithelial_neoplasia: "2",
                chronic_pancreatitis: "2",
                biliary_obstruction: "2",
                results: [
                    {
                        assay_type: "",
                        detection_result_gene: "",
                        detection_result_trans: "",
                        detection_result_varia: "",
                        functional_change: "",
                        other_function_change: "",
                        mutation_type: ""
                    }
                ],
                smoking: "2",
                drink: "2",
                vegetable_consum: "",
                fatty_meat: "2",
                dec: "",
                drink_cycle: "",
                bmi: "",
                height: "",
                weight: "",
                smoking_cycle: "",
                smoking_year: ""
            }
        };
    },
    components: {},
    created() {
        document.title="胰腺癌辅助信息";
        this.familyTreeId = M.url().familyTreeId;
        this.familyUserId = M.url().current_personid;
        this.cancerId = M.url().cancerId;
        this.getYxaCancer();
    },
    methods: {
        onClose() {
            window.close();
        },
        //功能改变
        goBackSelect(row) {
            row.functional_change = "";
        },
        addGen(row) {
            let obj = {
                assay_type: "",
                detection_result_gene: "",
                detection_result_trans: "",
                detection_result_varia: "",
                functional_change: "",
                other_function_change: "",
                mutation_type: ""
            };
            ++row;
            this.datas.results.splice(row, 0, obj);
        },
        removeGen(row) {
            if (this.datas.results.length <= 1) {
                this.$Message.info("最少为一条，不可删除了");
                return;
            }
            this.datas.results.splice(row, 1);
        },
        tableRowClassName(row, index) {
            row.index = index;
        },
        save() {
            console.log(this.datas);
            let obj = {
                userId: getCookie("userid"),
                familyTreeId: this.familyTreeId,
                familyUserId: this.familyUserId,
                cancerId: this.cancerId,
                familyCancer: this.datas
            };
            this.loading = true;
            familyTree.saveOrUpdateCancerForm(obj).then(res => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    this.$Message.success("保存" + res.msg);
                } else {
                    this.$Message.error(res.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            });
        },
        getBmi() {
            let bmi =
                Math.round(
                    this.datas.weight /
                        Math.pow(this.datas.height / 100, 2) *
                        100
                ) / 100;
            if (isNaN(bmi) || bmi == Infinity) {
                this.datas.bmi = "";
            } else {
                this.datas.bmi = bmi;
            }
        },
        tnm() {
            this.ShowState(this.datas.t, this.datas.n, this.datas.m);
        },
        ShowState(t, n, m) {
            if (t == 0 || m == 0 || n == 0) {
                this.datas.tnm_result = "无分期";
                return;
            }

            if (!t || !n || !m) {
                this.datas.tnm_result = "无分期";
                return;
            } else {
                if (m == "M1") {
                    this.datas.tnm_result = t + n + m + "  IV期";
                } else if (t == "T4") {
                    this.datas.tnm_result = t + n + m + "  III期";
                } else if (n == "N1") {
                    if (t == "T1" || t == "T2" || t == "T3") {
                        this.datas.tnm_result = t + n + m + "  IIB期";
                    }
                } else if (n == "N0") {
                    if (t == "T3") {
                        this.datas.tnm_result = t + n + m + "  IIA期";
                    } else if (t == "T2") {
                        this.datas.tnm_result = t + n + m + "  IB期";
                    } else if (t == "T1") {
                        this.datas.tnm_result = t + n + m + "  IA期";
                    } else if (t == "Tis") {
                        this.datas.tnm_result = t + n + m + "  O期";
                    }
                } else {
                    this.datas.tnm_result = "无分期";
                }
            }
        },

        getYxaCancer() {
            let obj = {
                userId: getCookie("userid"),
                familyTreeId: this.familyTreeId,
                familyUserId: this.familyUserId,
                cancerId: this.cancerId
            };
            this.loading = true;
            familyTree.findOneFromCancer(obj).then(res => {
                console.log(res);
                if (res.returnCode == 0 || res.returnCode == 200) {
                    if (res.data && res.data.familyCancer) {
                        this.datas = res.data.familyCancer;
                    }
                } else {
                    this.$Message.error(res.msg);
                }
                 this.loading = false;
            }).catch(error => {
                this.loading = false;
            });
        }
    },
    mounted() {
        this.getBmi();
    }
};
</script>
